/*
 * 整体妆容修改
 * @Author: ljb
 * @Date: 2018-03-27 17:53:27
 * @Last Modified by: ljb
 * @Last Modified time: 2018-09-05 16:00:30
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>
	img {
		width: 120px;
	}
</style>
<template>
	<div class="v-customer-device-account-edit">
		<Form
			ref="formValidate"
			:model="formValidate"
			:label-width="labelWidth(80, 100)"
			:rules="ruleValidate"
			name="eidt__form">

			<Form-item
				:label="$t('overall.name')"
				prop="name">
				<i-input
					v-model="formValidate.name"
					:placeholder="$t('overall.please_enter_name')"
					name="eidt__name"
					type="text"/>
			</Form-item>

			<Form-item
				:label="$t('product.thumb')"
				prop="thumb">
				<Uploader
					ref="thumb"
					:default.sync="thumb_src"
					@on-remove="(file)=>{handleRemove('thumb',file)}"
					@on-change="(file)=>{handleChange('thumb',file)}">
					{{ $t('common.pic_tip') }}
				</Uploader>
			</Form-item>

			<Form-item
				:label="$t('overall.priority')"
				prop="title">
				<InputNumber
					:max="100000"
					:min="0"
					v-model="formValidate.priority"
					:placeholder="$t('overall.please_enter_priority')"
					name="eidt__priority"/>
			</Form-item>

			<Form-item
				:label="$t('overall.category')"
				prop="classify">
				<Select
					v-model="formValidate.classify"
					name="eidt__category"
					clearable>
					<Option
						v-for="(value, key) in classifyList"
						:value="value.id"
						:key="key">{{ value.name }}</Option>
				</Select>
			</Form-item>

			<Form-item
				:label="$t('overall.status')"
				prop="asset_id">
				<Select
					v-model="formValidate.is_deleted"
					name="eidt__is_deleted"
					clearable
					filterable
					transfer>
					<Option
						v-for="(value,key) in status_options"
						:value="key"
						:key="key">{{ value }}</Option>
				</Select>
			</Form-item>

			<Form-item>
				<Button
					type="primary"
					name="eidt__submit"
					@click="handleSubmit('formValidate')">
					{{ $t('common.update') }}
				</Button>
			</Form-item>

		</Form>
	</div>
</template>

<script>

import { showLocalImage } from 'src/views/mixins/showLocalImage'; // 引入公共的mixins
import labelWidthMixin from 'src/views/mixins/labelWidthMixin';
import { validateUpdateImage } from 'src/validate';
import Uploader from 'src/views/component/Uploader';

export default {
	name: 'OverallMakeupEdit',

	components: {
		Uploader,
	},
	mixins: [showLocalImage, labelWidthMixin],
	props: {
		makeupDetail: {
			type: Object,
			default() {
				return {};
			},
		},
		classifyList: {
			type: Array,
			default() {
				return [];
			},
		},
	},
	data() {
		return {
			status_options: {
				0: this.$t('overall.using'),
				1: this.$t('overall.off_sale'),
			},

			formValidate: {
				name: '',

				thumb: '',

				is_deleted: '',

				priority: 0,

				// 补充
				classify: '',
			}, // 更新账号时的表单

			ruleValidate: { // 表单验证规则
				name: [
					{
						required: true,
						message: this.$t('validate.required', { field: this.$t('overall.name') }),
						trigger: 'blur,change',
					},
				],
				thumb: [
					{ required: true, validator: validateUpdateImage, trigger: 'blur,change' },
				],
			},

			show_password: false,

			thumb_src: '', // 图片路径

		};
	},
	created() {
		this.initFormData();
	},
	methods: {

		initFormData() {
			if (this.makeupDetail) {
				this.formValidate.is_deleted = String(this.makeupDetail.is_deleted);

				this.formValidate.priority = Number(this.makeupDetail.priority) || 0;

				this.formValidate.name = this.makeupDetail.name;
				this.formValidate.thumb = this.makeupDetail.thumb;

				this.formValidate.classify = this.makeupDetail.pack_category_id;

				// this.img_local_src = this.makeupDetail.thumb;
				this.thumb_src = this.makeupDetail.thumb;
			}
		},

		/**
		 * 选择图片
		 * @param {Object} file {选择的文件对象集合}
		 * @param {String} field {icon}
		 * @return {undefined}
		 */
		handleChange(field, { file }) {
			this.formValidate[field] = file;
			this.$refs.formValidate.validateField(field);
		},


		/**
		 * 删除图片
		 * @param {String} filed {icon}
		 * @return {undefined}
		 */
		handleRemove(field) {
			this.formValidate[field] = null;
			this.$refs.formValidate.validateField(field);
		},

		/**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.updateAccount();
				} else {
					this.$Message.error(this.$t('common.exist_empty_field'));
				}
			});
		},

		/**
         * 更新设备账号
         * @return {undefined}
         */
		updateAccount() {
			this.$emit('update', this.makeupDetail.id, this.formDataCreate());
		},

		/**
         * 手动拼接formdata数据
         * @return {Object} {拼接好的formdata数据}
         */
		formDataCreate() {
			const new_object = {
				name: this.formValidate.name,

				thumb: this.formValidate.thumb !== this.makeupDetail.thumb ? this.formValidate.thumb : '',

				is_deleted: this.formValidate.is_deleted,

				priority: this.formValidate.priority,

				pack_category_id: this.formValidate.classify,

				_method: 'put',
			};

			const form_data = new FormData();

			Object.keys(new_object).forEach((key) => {
				if (typeof new_object[key] !== 'undefined') {
					form_data.append(key, new_object[key]);
				}
			});

			return form_data;
		},

	},
};
</script>
